<template>
  <el-container class="header-container">
    <el-header class="nav-header" height="60px">
      <div class="nav-content">
        <!-- Logo区域 -->
        <div class="nav-left">
          <el-image
            id="pcTou"
            class="logo"
            src="/src/assets/logo.png"
            fit="contain"
            @click="router.push('/home')"
          />
          
          <!-- PC端导航菜单 -->
          <el-menu
            v-if="!isPhone"
            mode="horizontal"
            class="nav-menu"
            :collapse="false"
            :ellipsis="false"
            background-color="transparent"
            text-color="#ffffff"
            active-text-color="#FFD700"
          >
            <el-menu-item index="article" @click="router.push('/article')">
              <el-icon><Document /></el-icon>
              <span class="pcLi">文章展示</span>
            </el-menu-item>
            <el-menu-item index="resourceshare" @click="router.push('/resourceshare')">
              <el-icon><Share /></el-icon>
              <span class="pcLi">资源分享</span>
            </el-menu-item>
            <el-menu-item index="achievement" @click="router.push('/achievement')">
              <el-icon><Trophy /></el-icon>
              <span class="pcLi">成果展示</span>
            </el-menu-item>
            <el-menu-item index="show" @click="router.push('/show')">
              <el-icon><User /></el-icon>
              <span class="pcLi">团队成员</span>
            </el-menu-item>
            <el-menu-item index="album" @click="router.push('/album')">
              <el-icon><Picture /></el-icon>
              <span class="pcLi">相册展示</span>
            </el-menu-item>
          </el-menu>
        </div>

        <!-- 移动端标题 -->
        <div class="nav-center" v-if="isPhone">
          <el-text class="team-title" size="large" tag="b">
            "Web应用开发"创新团队
          </el-text>
        </div>

        <!-- 右侧用户区域 -->
        <div class="nav-right">
          <!-- 未登录状态 -->
          <el-button
            v-if="!isPhone && !isLogin"
            type="primary"
            @click="router.push('/login')"
          >
            登录
          </el-button>

          <!-- 已登录状态 -->
          <el-dropdown
            v-if="!isPhone && isLogin"
            placement="bottom-end"
            trigger="hover"
          >
            <div class="user-avatar-wrapper">
              <el-avatar
                :size="45"
                :src="isLogin ? userStore.userInfo.tx : imgURL"
              />
              <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/userHome')">
                  <el-icon><Avatar /></el-icon>
                  <span>个人主页</span>
                </el-dropdown-item>
                <el-dropdown-item @click="router.push('/addArticle')">
                  <el-icon><EditPen /></el-icon>
                  <span>文章发布</span>
                </el-dropdown-item>
                <el-dropdown-item @click="router.push('/resourceIssue')">
                  <el-icon><Link /></el-icon>
                  <span>资源发布</span>
                </el-dropdown-item>
                <el-dropdown-item @click="router.push('/addAchivement')">
                  <el-icon><Promotion /></el-icon>
                  <span>成果发布</span>
                </el-dropdown-item>
                <el-dropdown-item divided @click="UserOut">
                  <el-icon><SwitchButton /></el-icon>
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <!-- 移动端菜单按钮 -->
          <el-button
            v-if="isPhone"
            type="text"
            @click="drawClick"
            class="mobile-menu-btn"
          >
            <el-icon size="20"><Menu /></el-icon>
          </el-button>
        </div>
      </div>
    </el-header>
  </el-container>

  <!-- 移动端抽屉菜单 -->
  <el-drawer
    v-model="drawer"
    :with-header="false"
    :direction="direction"
    size="70%"
    class="mobile-drawer"
  >
    <div class="drawer-header">
      <div class="user-card">
        <div class="card-background">
          <el-image
            :src="isLogin ? userStore.userInfo.tx : imgURL"
            fit="cover"
            class="bg-image"
          />
        </div>
        <el-avatar
          class="user-avatar"
          :size="80"
          :src="isLogin ? userStore.userInfo.tx : imgURL"
          @click="
            userStore.userInfo.name == null || userStore.userInfo.name == ''
              ? go('/login')
              : go('/user/article')
          "
        />
        <h2 class="user-name">
          {{ !isLogin ? '未登录' : userStore.userInfo.name }}
        </h2>
        <p class="user-title">{{ !isLogin ? '点击头像登录' : '团队成员' }}</p>
      </div>
    </div>
    
    <div class="drawer-body">
      <el-space direction="vertical" size="large" fill>
        <el-button
          v-for="(item, index) in routers"
          :key="index"
          type="primary"
          plain
          size="large"
          class="nav-button"
          @click="go(item.path)"
        >
          <span>{{ item.name }}</span>
        </el-button>
      </el-space>
    </div>
  </el-drawer>

  <!-- 移动端回到顶部按钮 -->
  <el-backtop v-if="isPhone" :bottom="50">
    <el-button
      type="primary"
      :icon="Menu"
      circle
      @click.stop="drawClick"
      class="mobile-menu-float"
    />
  </el-backtop>

  <!-- 注册抽屉 -->
  <el-drawer v-model="drawerRegister" direction="rtl" size="400px">
    <template #header>
      <h2>注册</h2>
    </template>
    <template #default>
      <register-my></register-my>
    </template>
  </el-drawer>
</template>

<script setup>
import router from '../../router/index'
import { onMounted, defineProps, onUpdated } from 'vue'
import { ref, computed } from 'vue'
import { TweenMax, Bounce, Back } from 'gsap'
import RegisterMy from '../../views/login/registerMy.vue'
import {
  Avatar,
  EditPen,
  SwitchButton,
  Promotion,
  Link,
  Document,
  Share,
  Trophy,
  User,
  Picture,
  Menu,
  ArrowDown,
} from '@element-plus/icons-vue'
import auth from '../../utils/auth'
import { useStore } from '@/store'

const userStore = useStore()
const drawer = ref(false)
let drawerRegister = ref(false)
const direction = ref('ltr')
const imgURL = ref('') // 默认头像URL

const routers = [
  {
    path: '/home',
    name: '首页',
  },
  {
    path: '/article',
    name: '团队动态',
  },
  {
    path: '/resourceshare',
    name: '资源分享',
  },
  {
    path: '/achievement',
    name: '成果分享',
  },
  {
    path: '/show',
    name: '成员展示',
  },
  {
    path: '/album',
    name: '团队风采',
  },
]

const props = defineProps({
  isPhone: {
    type: Boolean,
  },
})

const isLogin = computed(() => {
  return !!userStore.token
})

onMounted(() => {
  const animate = TweenMax.from('#pcTou', {
    opacity: 0,
    y: -100,
    duration: 1.5,
    ease: Bounce.easeOut,
  })
  if (!props.isPhone) {
    TweenMax.staggerFrom(
      '.pcLi',
      1,
      { opacity: 0, x: 100, ease: Back.easeOut },
      0.3
    )
  }
})

let timer = null
onUpdated(() => {
  clearTimeout(timer)
  timer = setTimeout(() => {
    TweenMax.from('#pcTou', {
      opacity: 0,
      y: -100,
      duration: 1.5,
      ease: Bounce.easeOut,
    })
  }, 1500)
})

function UserOut() {
  auth.removeToken()
  userStore.resetToken()
  router.push('/')
}

function go(path) {
  router.push(path)
  let my = null
  if (my) {
    clearTimeout(my)
  }
  my = setTimeout(() => {
    drawer.value = false
  }, 500)
}

function drawClick() {
  drawer.value = true
}
</script>

<style scoped>
/* 主容器样式 */
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.nav-header {
  background: #409EFF;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Logo区域 */
.nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  height: 50px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

/* 导航菜单 */
.nav-menu {
  border-bottom: none;
}



@keyframes neon2 {
  from {
    text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #228dff;
  }
  to {
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #228dff;
  }
}

/* 中间标题 */
.nav-center {
  flex: 1;
  text-align: center;
}

.team-title {
  color: white;
  font-size: 18px;
  font-weight: bold;
}

/* 右侧用户区域 */
.nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-avatar-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 25px;
  transition: background-color 0.3s ease;
}

.user-avatar-wrapper:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-icon {
  color: white;
  font-size: 12px;
}

.mobile-menu-btn {
  color: white;
}

/* 移动端抽屉样式 */
.mobile-drawer {
  background: #409EFF;
}

.drawer-header {
  padding: 30px 20px;
  background: rgba(64, 158, 255, 0.9);
}

.user-card {
  position: relative;
  text-align: center;
  color: white;
}

.card-background {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  height: 120px;
  overflow: hidden;
  border-radius: 15px;
}

.bg-image {
  width: 100%;
  height: 100%;
  filter: blur(20px);
  transform: scale(1.1);
  opacity: 0.3;
}

.user-avatar {
  position: relative;
  z-index: 2;
  margin: 20px 0 15px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.user-name {
  position: relative;
  z-index: 2;
  margin: 10px 0 5px;
  font-size: 20px;
  font-weight: bold;
}

.user-title {
  position: relative;
  z-index: 2;
  margin: 0;
  opacity: 0.8;
  font-size: 14px;
}

.drawer-body {
  padding: 30px 20px;
}

.nav-button {
  width: 100%;
  height: 50px;
  font-size: 16px;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.nav-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(64, 158, 255, 0.3);
}

/* 移动端浮动按钮 */
.mobile-menu-float {
  background: #409EFF;
  border: none;
  box-shadow: 0 4px 15px rgba(64, 158, 255, 0.4);
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .nav-header {
    height: 50px;
  }
  
  .nav-content {
    padding: 0 15px;
  }
  
  .logo {
    height: 40px;
  }
  
  .team-title {
    font-size: 16px;
  }
}

/* Element Plus 组件样式覆盖 */
:deep(.el-menu--horizontal) {
  border-bottom: none;
}

:deep(.el-menu--horizontal .el-menu-item) {
  color: white;
}

:deep(.el-menu--horizontal .el-menu-item.is-active) {
  color: #FFD700 !important;
  border-bottom-color: #FFD700 !important;
}

:deep(.el-menu--horizontal .el-menu-item:hover) {
  color: #FFD700 !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-dropdown-menu) {
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

:deep(.el-drawer) {
  background: #409EFF;
}

:deep(.el-drawer__header) {
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
